import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile'
import { AppOutline, MessageOutline, MessageFill, UnorderedListOutline, UserOutline, } from 'antd-mobile-icons'
export default function Layout() {
    const navgiate = useNavigate()
    const tabs = [
        {
            key: '/layout/home',
            title: '首页',
            icon: <AppOutline />,
            badge: Badge.dot,
        },
        {
            key: '/layout/knowledge',
            title: '知识',
            icon: <UnorderedListOutline />,
            badge: '5',
        },
        {
            key: '/layout/message',
            title: '消息',
            icon: active =>
                active ? <MessageFill /> : <MessageOutline />,
            badge: '99+',
        },
        {
            key: '/layout/mine',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    // const [activeKey, setActiveKey] = React.useState('todo')

    return (
        <div>
            <Outlet />
            <div className='footer'>
                <TabBar onChange={(key)=>{
                    navgiate(key)
                }}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        </div>
    )
}
